<template>
    <view :style="{'height':windowHeight, 'width':windowWidth,'background-color':'#F1F1F1'}">

        <scroll-view>
            <view>
                <view class="station-info-header"></view>
                <view>
                        <view>
                            <uni-row class="oneLayer">
                                <uni-col :span="24">
                                    <uni-section title="台站号" type="line"></uni-section>
                                </uni-col>
                            </uni-row>
                            <view style="height:1rem"></view>
                            <uni-row class="twoLayer">
                                <uni-col :span="24">
                                    <picker @change="bindStationIdsPickerChange" :value="stationIdIndex" :range="stationIds">
                                        <uni-easyinput type="text" v-model="stationIds[stationIdIndex]"></uni-easyinput>
                                    </picker>
                                </uni-col>
                            </uni-row>
                        </view>
                        <view>
                            <uni-row class="oneLayer">
                                <uni-col :span="24">
                                    <uni-section title="台站名" type="line"></uni-section>
                                </uni-col>
                            </uni-row>
                            <view style="height:1rem"></view>
                            <uni-row class="twoLayer">
                                <uni-col :span="24">
                                    <uni-easyinput type="text" v-model="checkRecord.stationName"/>
                                </uni-col>
                            </uni-row>
                        </view>
                        <view>
                            <uni-row class="oneLayer">
                                <uni-col :span="24">
                                    <uni-section title="巡检时间" type="line"></uni-section>
                                </uni-col>
                            </uni-row>
                            <view style="height:1rem"></view>
                            <uni-row class="twoLayer">
                                <uni-col :span="24">
                                    <view class="example-body">
                                        <uni-datetime-picker
                                                type="datetime"
                                                v-model="checkRecord.checkDate"
                                                @change="changeCheckDate"
                                        />
                                    </view>
                                </uni-col>
                            </uni-row>
                        </view>
                        <view>
                            <uni-row class="oneLayer">
                                <uni-col :span="24">
                                    <uni-section title="巡检内容" type="line"></uni-section>
                                </uni-col>
                            </uni-row>
                            <view style="height:1rem"></view>
                            <uni-row class="twoLayer">
                                <uni-col :span="24">
                                    <uni-easyinput type="textarea" v-model="checkRecord.checkContent"/>
                                </uni-col>
                            </uni-row>
                        </view>
                        <view>
                            <uni-row class="oneLayer">
                                <uni-col :span="24">
                                    <uni-section title="巡检人员" type="line">
                                        <van-button  icon="plus" type="primary" @click="addInputValue(checkRecord.checkPeople)" />
                                    </uni-section>
                                </uni-col>
                            </uni-row>
                            <view style="height:1rem"></view>
                            <uni-row class="twoLayer">
                                <uni-col :span="24">
                                    <uni-list>
                                        <view v-for="people in checkRecord.checkPeople">
                                            <uni-easyinput type="text" v-model="people.text" />
                                        </view>
                                    </uni-list>
                                </uni-col>
                            </uni-row>
                        </view>
                        <view>
                            <uni-row class="oneLayer">
                                <uni-col :span="24">
                                    <uni-section title="所属公司" type="line"></uni-section>
                                </uni-col>
                            </uni-row>
                            <view style="height:1rem"></view>
                            <uni-row class="twoLayer">
                                <uni-col :span="24">
                                    <uni-easyinput type="text" v-model="checkRecord.checkCompany" />
                                </uni-col>
                            </uni-row>
                        </view>
                    <view style="height:2rem"></view>
                    <van-button type="primary" block @click="saveOrUpdate()">保存</van-button>
                </view>

            </view>
            <view class="station-info-footer"></view>
        </scroll-view>
    </view>

</template>

<script>
    import Date from '../../common/date'

    export default {
        name: "CheckRecordUpdate",
        data() {
            return {
                windowWidth: '375px',
                windowHeight: '667px',
                action: '',
                checkRecord: {
                    stationCode: '',
                    stationName: '',
                    checkDate: '2021-11-21 22:00:00',
                    checkContent: '',
                    checkPeople: [{text: ''}],
                    checkCompany: '',
                    id: '',
                },
                stationIds:[],
                stationNames: [],
                stationIdIndex: '',
                stationCode: ''
            }
        },
        onLoad: function(options) {
            this.windowWidth = options.windowWidth
            this.windowHeight = options.windowHeight
            this.action = options.action
            this.stationCode = options.stationCode
            this.checkRecord.checkDate = new Date().Format("yyyy-MM-dd hh:mm:ss")

            this.fetchStationIds()

            if (this.action == 'update') {
                this.checkRecord.id = options.recordId.trim()
                this.fetchCheckRecordById(this.checkRecord.id)
            }
        },
        methods: {
            changeCheckDate(e) {
                this.checkRecord.checkDate = e
                console.log('checkRecord date:', this.checkDate)
            },
            addInputValue(values) {
                values.push({text:''})
            },
            bindStationIdsPickerChange(e) {
                this.stationIdIndex = e.target.value
                this.checkRecord.stationCode = this.stationIds[this.stationIdIndex]
                this.checkRecord.stationName = this.stationNames[this.stationIdIndex]
            },
            async fetchStationIds() {
                await this.uniRequest({
                    url: '/stations/stationIds',
                    method: 'GET',
                }).then(res => {
                    console.log('fetchStationIds Success! res: ', res)
                    this.stationIds = res.data.map(item => item.stationCode)
                    this.stationNames = res.data.map(item => item.stationName)
                }).catch(err => {
                    console.error('fetchStationIds ERROR: ', err)
                })

                if (this.checkRecord.stationCode === '' && this.stationCode === '') {
                    return
                }
                if (this.checkRecord.stationCode === '') {
                    this.checkRecord.stationCode = this.stationCode
                }
                this.fetchStationCode()
            },
            async fetchCheckRecordById(recordId) {
                uni.showLoading()
                this.uniRequest({
                    url: '/stations/checkRecords/' + recordId,
                    method: 'GET',
                }).then((res) => {
                    this.checkRecord = res.data
                    if (this.stationIds.length > 0) {
                        this.fetchStationCode()
                    }
                    uni.hideLoading()
                }).catch((err) => {
                    console.log('fetchRecordInfo Error:', err)
                    uni.hideLoading()
                    uni.showToast({
                        icon: 'error',
                        title: '巡检记录获取失败！ ',
                        duration: 2000
                    })
                })


            },
            fetchStationCode() {
                for (var i = 0; i < this.stationIds.length; i++) {
                    if (this.checkRecord.stationCode === this.stationIds[i]) {
                        this.stationIdIndex = i
                    }
                }
                this.checkRecord.stationCode = this.stationIds[this.stationIdIndex]
                this.checkRecord.stationName = this.stationNames[this.stationIdIndex]
            },
            saveOrUpdate() {
                uni.showLoading()
                this.uniRequest({
                    url: '/stations/checkRecords',
                    method: 'POST',
                    data: this.checkRecord
                }).then(response => {
                    console.log("saveOrUpdate Request Success! Response: ", response)
                    uni.hideLoading()
                    uni.showToast({
                        icon: 'success',
                        title: '巡检记录提交成功！ ',
                        duration: 2000,
                        success: () => {
                            setTimeout(() => {
                                let pages = getCurrentPages(); // 当前页面
                                let beforePage = pages[pages.length - 2]; // 上一页
                                uni.navigateBack({
                                    delta: 1,
                                    animationType: 'pop-out',
                                    animationDuration: 200,
                                    success: () => {
                                        beforePage.onLoad(beforePage.options)
                                    }
                                });
                            }, 1000)
                        }
                    })
                }).catch(error => {
                    console.error("saveOrUpdate Request ERROR: ", error)
                    uni.hideLoading()
                    uni.showToast({
                        icon: 'error',
                        title: '巡检记录提交失败,请检查提交数据！',
                        duration: 2000
                    })
                })
            },

        }
    }
</script>

<style scoped>

    .station-info-header {
        height: 2rem;
    }

    .station-info-footer {
        height: 2rem;
    }

    .row-height {
        height: 3rem;
    }
</style>